<template>
	<view class="search">
		<u-navbar title="">
			<view class="slot-wrap">
				<view class="input">
					<!-- <text class="iconfont">&#xe670;</text> -->
					<image class="search_img" src="/static/home/search.png"></image>
					<u-input v-model.trim="value" @confirm="searchList" placeholder="请输入搜索信息" type="text" confirm-type="搜索" :border="false" />
				</view>
			</view>
		</u-navbar>

		<view class="list">
			<view class="listX" v-for="(v, k) in listData" :key="k" @tap="courseDetails(v.id)">
				<view class="listX_left"><u-lazy-load class="lazy_load" :image="v.image" :loading-img="loadingImg"></u-lazy-load></view>
				<view class="listX_right">
					<view class="title u-line-3">{{ v.title }}</view>
					<view class="money">￥{{ v.price }}</view>
				</view>
			</view>
		</view>
		<noData text="搜索不到内容" v-if="listData.length == 0"></noData>
		<!-- <view v-if="listData.length == 0" style="padding: 20rpx 0;"><u-empty text="没有更多了" mode="search"></u-empty></view> -->
		<view style="padding: 14rpx 0;"><u-loadmore v-if="last_page > 1" :status="status" :icon-type="iconType" :load-text="loadText" /></view>
	</view>
</template>

<script>
	import noData from '@/components/xs-components/noData.vue';
export default {
	data() {
		return {
			value: '',
			loadingImg: '',
			image: '',
			searchValue: '',
			listData: [],
			refresh: true,
			page: 1,
			limit: 15,
			last_page: 1,
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有更多了'
			}
		};
	},
	components: {
		noData
	},
	onLoad(option) {
		this.value = option.value;
		uni.showLoading({
			title: '加载中'
		});
		this.searchInfo();
	},
	onShow() {},
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.refresh = true;
		this.searchInfo();
	},
	// 上拉加载
	onReachBottom() {
		if (this.page >= this.last_page) return;
		this.status = 'loading';
		this.page++;
		this.refresh = false;
		setTimeout(() => {
			if (this.page >= this.last_page) this.status = 'nomore';
			else this.status = 'loading';
			this.searchInfo();
		}, 500);
	},
	methods: {
		searchInfo() {
			this.$api
				.post(global.apiUrls.getSearch, {
					keywords: this.value,
					page: this.page
				})
				.then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					console.log(res);
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						if (this.refresh) {
							this.listData = res.data.data.data;
						} else {
							this.listData = this.listData.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				});
		},
		searchList() {
			this.page = 1;
			this.refresh = true;
			uni.showLoading({
				title: '加载中'
			});
			this.searchInfo();
		},
		// 课程详情
		courseDetails(id) {
			uni.navigateTo({
				url: '/pages/study/details?id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// page {
// 	background: #FFFFFF;
// 	height: 100%;
// 	color: #333333;
// }
.search {
	// padding: 24upx 32upx;
	.slot-wrap {
		height: 66upx;
		display: flex;
		margin-bottom: 56upx;
		padding: 28rpx 32upx 0 16rpx;
		// background: green;
		width: 100%;

		.input {
			position: relative;
			flex: 8.5;
			/deep/.u-input {
				background: #f6f7f9;
				border-radius: 8upx;
			}
			/deep/.u-input__input {
				padding-left: 60upx;
			}
			/deep/.u-input__right-icon {
				height: 66upx;
				line-height: 70upx;
				padding-right: 16rpx;
			}
			.iconfont {
			}
			.search_img {
				width: 26rpx;
				height: 26rpx;
				position: absolute;
				top: 90%;
				left: 16upx;
				z-index: 100;
				transform: translateY(-50%);
				// color: #C2C3C7;
			}
		}
		.sousuo {
			flex: 1.5;
			margin-left: 28upx;
			padding-top: 10upx;
		}
	}
	.list {
		padding: 0 32rpx;
		.listX {
			padding: 32rpx 0;
			display: flex;
			border-bottom: 1rpx solid #eeeeee;
			.listX_left {
				width: 168rpx;
				height: 168rpx;
				border-radius: 16rpx;
				// background: skyblue;
				margin-right: 24rpx;
				// /deep/.u-lazy-item {
				// 	width: 100%;
				// 	height: 100% !important;
				// }
				.lazy_load {
					width: 168rpx;
					height: 168rpx;
					border-radius: 8upx !important;
				}
				image {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
			.listX_right {
				flex: 7;
				.title {
					// height: 90rpx;
					padding-top: 15rpx;
					font-weight: bold;
					margin-bottom: 33rpx;
					line-height: 45rpx;
					font-size: 32rpx;

					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.title2 {
					color: #bfbfbf;
				}
				.money {
					color: #ff3a3a;
					font-weight: bold;
				}
			}
			.listX_right2 {
				flex: 1;
				text-align: right;
				padding-top: 40rpx;
				.iconfont {
					font-size: 12rpx;
				}
			}
		}
		// .listX {
		// 	padding:  32rpx 0;
		// 	display: flex;
		// 	border-bottom: 1rpx solid #EEEEEE;
		// 	.listX_left {
		// 		width: 168rpx;
		// 		height: 168rpx;
		// 		border-radius: 16rpx;
		// 		// background: skyblue;
		// 		margin-right: 24rpx;
		// 		// /deep/.u-lazy-item {
		// 		// 	width: 100%;
		// 		// 	height: 100% !important;
		// 		// }
		// 		.lazy_load {
		// 			height: 168rpx;
		// 			border-radius: 8upx !important;
		// 		}
		// 		image {
		// 			width: 100%;
		// 			height: 100%;
		// 			border-radius: 16rpx;
		// 		}
		// 	}
		// 	.listX_right {

		// 		.title {
		// 			height: 90rpx;
		// 			font-weight: bold;
		// 			margin-bottom: 33rpx;
		// 		}
		// 		.money {
		// 			color: #FF3A3A;
		// 			font-weight: bold;
		// 		}
		// 	}
		// }
	}
}
</style>
